import RnButton from 'components/RnButton';
import RnInput from 'components/RnInput';
import React, {useRef, useState} from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
interface BottomProps {
  meLike?: boolean;
  meGoing?: boolean;
  onPress: (param: string, pyload: any) => void;
}
export default function Bottom(props: BottomProps) {
  const {meLike, meGoing, onPress} = props;
  const [comment, setComment] = useState('');
  const [showComment, setShowComment] = useState(false);
  return (
    <>
      {!showComment && (
        <>
          <View style={styles.bottomContainer}>
            <View style={styles.leftContent}>
              <RnButton
                onPress={() => {
                  setShowComment(true);
                }}>
                <Icon
                  name="chatbubble-ellipses-outline"
                  size={22}
                  color="#000"
                />
              </RnButton>
              <RnButton onPress={() => onPress('like')}>
                <Icon
                  name={meLike ? 'heart' : 'heart-outline'}
                  size={22}
                  color={meLike ? '#D5EF7F' : '#000'}
                />
              </RnButton>
            </View>
            <View style={styles.rightContent}>
              <TouchableOpacity
                style={styles.goingBtn}
                onPress={() => onPress('going')}>
                <Icon
                  name={
                    meGoing ? 'checkmark-circle' : 'checkmark-circle-outline'
                  }
                  size={22}
                  color="#8560A9"
                />
                <Text style={styles.goingBtnText}>
                  {meGoing ? 'I am goning' : 'Join'}
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </>
      )}
      {showComment && (
        <View style={styles.bottomContainer}>
          <View style={styles.commentLeftContent}>
            <Icon
              name="close"
              size={32}
              color="#FFD3C1E5"
              onPress={() => {
                setShowComment(false);
              }}
            />
            <RnInput
              placeholderColor="#fff"
              styles={styles.input}
              value={comment}
              onChange={setComment}
            />
          </View>
          <View style={styles.commentRightCOntent}>
            <TouchableOpacity
              style={styles.goingBtn}
              onPress={() => onPress('comment', comment)}>
              <Icon name="paper-plane-outline" size={28} color="#8560A9" />
            </TouchableOpacity>
          </View>
        </View>
      )}
    </>
  );
}
const styles = StyleSheet.create({
  // 底部按钮布局
  bottomContainer: {
    flexDirection: 'row',
  },
  leftContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flex: 0.563,
    paddingHorizontal: 42,
    paddingVertical: 16,
    backgroundColor: '#8560A9',
  },
  rightContent: {
    flex: 0.437,
    backgroundColor: '#D5EF7F',
  },
  goingBtn: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  goingBtnText: {
    paddingLeft: 14,
    color: '#8560A9',
  },

  // 评论
  commentLeftContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    flex: 1,
    paddingLeft: 10,
    paddingRight: 14,
    paddingVertical: 16,
    backgroundColor: '#8560A9',
  },
  commentRightCOntent: {
    width: 64,
    backgroundColor: '#D5EF7F',
  },
  input: {
    flex: 1,
    marginVertical: 0,
    borderRadius: 26.7,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#fff',
    backgroundColor: '#fff',
    color: '#000',
    fontSize: 14,
  },
});
